<template>
<el-card shadow="never" class="aui-card--fill">
    <div  id="mapcontainerrelitu">
<!--<div class="huandao">-->
    <!--<el-select v-model="jqID" @change="Toggledata" clearable placeholder="请选择景区">-->
        <!--<el-option-->
                <!--v-for="item in optionsdata"-->
                <!--:key="item.id"-->
                <!--:label="item.name"-->
                <!--:value="item.id">-->
        <!--</el-option>-->
    <!--</el-select>-->

<!--</div>-->

    </div>
</el-card>
</template>

<script>


export default {
    data() {
        return {
            jqID:'',
            optionsdata:[],
            map: null,
            heatmap: null,
            jingqurelitu:[],
        };
    },
    components: {

    },
    mounted() {
        // 延迟加载，防止出现AMap not defined
        setTimeout(() => {
            this.initMap();
          //  this.createHeatMap();
        }, 1000);
        setTimeout(() => {
            this.getalldata();;
            //  this.createHeatMap();
        }, 1100);
    },
    beforeDestroy() {
        this.map && this.map.destroy();
    },
    created () {
this.getjingqudata();

    },
    methods: {
        initMap() {
            this.map = new AMap.Map("mapcontainerrelitu", {
                resizeEnable: true,
                zoom: 12, // 初始化地图级别
                zooms: [6, 16], // 缩放区间
                center: [122.469019,30.720894], //中心点坐标
                mapStyle: 'macaron', // 马卡龙(其他样式可在高德api中查找进行修改)
            });

            this.map.on("click", (e) => {
                // 获取经纬度
                console.log('111111111111111111', e.lnglat.getLng() + ',' + e.lnglat.getLat())
            });
        },
        //判断浏览区是否支持canvas
        isSupportCanvas() {
            let elem = document.createElement("canvas");
            return !!(elem.getContext && elem.getContext("2d"));
        },
        createHeatMap() {
            if (!this.isSupportCanvas()) {
                return this.$message({
                    message: '热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试。',
                    type: 'warning'
                });
            }

            let __this = this;
            this.map.plugin(["AMap.Heatmap"], function() {
                //初始化heatmap对象
                __this.heatmap = new AMap.Heatmap(__this.map, {
                    radius: 60, // 给定半径
                    opacity: [0, 0.8],
                    gradient: {
                        0.5: '#254117',
                        0.65: 'rgb(117,211,248)',
                        0.7: 'rgb(0, 255, 0)',
                        0.9: '#ffea00',
                        1.0: 'red'
                    }
                });
              //  __this.heatmap.hide()
                // let heatmapData=__this.jingqurelitu.map((item,index,arr)=>{
                //     let json={};
                //     json.lat=item.lat;
                //     json.lng=item.lon;
                //     json.count=item.diff;
                //     return json
                // })
                let heatmapData=[
                    {
                        lng:122.532705,
                        lat:30.720009,
                        count:499,
                    },
                    {
                        lng:122.527277,
                        lat:30.719935,
                        count:89,
                    },
                    {
                        lng:122.53395,
                        lat:30.703147,
                        count:90,
                    },
                    {
                        lng:122.50996,
                        lat:30.715286,
                        count:140,
                    },
                    {
                        lng:122.496828,
                        lat:30.704401,
                        count:540,
                    },
                    {
                        lng:122.475113,
                        lat:30.712113,
                        count:340,
                    },
                    {
                        lng: 122.4655,
                        lat:30.712298,
                        count:940,
                    },
                    {
                        lng:122.469491,
                        lat:30.713165,
                        count:340,
                    },
                    {
                        lng: 122.45902,
                        lat:30.728199,
                        count:740,
                    },
                    {
                        lng: 122.462582,
                        lat:30.693958,
                        count:740,
                    },
                    {
                        lng: 122.447304,
                        lat:30.721005,
                        count:440,
                    },
                    {
                        lng: 122.472281,
                        lat:30.714105,
                        count:440,
                    },
                    {
                        lng: 122.532984,
                        lat:30.720977,
                        count:40,
                    },
                    {
                        lng: 122.53395,
                        lat:30.721678,
                        count:140,
                    },
                    {
                        lng: 122.535087,
                        lat:30.721309,
                        count:70,
                    },
                    {
                        lng:122.534154,
                        lat:30.720516,
                        count:70,
                    },
                    {
                        lng:122.535656,
                        lat:30.720202,
                        count:120,
                    },
                    {
                        lng: 122.53572,
                        lat:30.718929,
                        count:50,
                    },
                    {
                        lng:122.534132,
                        lat:30.718155,
                        count:500,
                    },
                    {
                        lng:122.532845,
                        lat:30.717841,
                        count:100,
                    },
                    {
                        lng:122.531139,
                        lat:30.71964,
                        count:100,
                    },
                    {
                        lng:122.53027,
                        lat:30.718238,
                        count:200,
                    },
                    {
                        lng:122.528736,
                        lat:30.718192,
                        count:200,
                    },
                    {
                        lng: 122.531139,
                        lat:30.721097,
                        count:200,
                    },

                ]
              //  __this.heatmap.show()
                console.log('  __this.jingqurelitu',  heatmapData)
                __this.heatmap.setDataSet({
                    data: heatmapData,
                    max: 100
                });
            });
        },

        Toggledata(){
           // console.log('111111111111111111',this.jqID)
this.getalldata();
        },
        getalldata(){
            this.$http
                .get("/sys/bdmcs/queryPressures",  {
                    params: {
                        isMapId: this.jqID,
                    }
                })
                .then((res) => {
                    if (res.data.code == 0) {
this.jingqurelitu=res.data.data;
                        console.log('111111111111111111',res.data.data)
                        this.createHeatMap();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
        },
        getjingqudata(){
            this.$http
                .get("/sys/ismap/pageNoPro",  {
                    params: {
                        page: 1,
                        limit: -1,
                        type: 1,
                    }
                })
                .then((res) => {
                    if (res.data.code == 0) {
this.optionsdata=res.data.data.list;

                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
        },


    }
};
</script>

<style scoped>
    /*@import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");*/
#mapcontainerrelitu{
    width: 100%;
    height:calc(100vh - 50px - 38px - 70px) !important;
position: relative;
}
.huandao{
    position: absolute;
    top: 0px;
left: 0px;
    width: 250px;
    height: 50px;
    z-index: 999;
}

</style>
